<template>
  <h1>age:{{obj.age}}</h1>
  <h1>我是通过计算属性加5后的age:{{add5}}</h1>
  <h1>计数器:{{count}}</h1>
  <h1>{{arr}}</h1>
  <button @click="add">点我计数器加1</button>
  <button @click="changeData">点我批量修改数据</button>


</template> 

<script>
// 引入Pinia中的仓库
import { useCounterStore } from './stores/counter'
import { storeToRefs } from 'pinia'
export default {
  setup() {
    // 接收pinia中的数据
    const test = useCounterStore()
    const {add}=test
    const changeData=()=>{
      // 方法一:
      // test.obj.age=100
      // test.count=5555
      // 方法二: 
      // test.$patch({
      //   // obj.age:200, 无法修改对象嵌套
      //   count:100,
      //   // arr:[...test.arr,7,8,9]
      // })
      test.$patch((state)=>{
        state.count=500
        state.arr.push(999)
      })
    }
    return {
      // storeToRefs无法扩展方法，要想使用方法，可以直接解构
      ...storeToRefs(test),
      add,
      changeData
    }
  }
}
</script>

<style>
</style>